<template>
	<view style="height: 800px;" class="box">
		<view class="square-box" style="color: #4b8400;width: 370px;font-size: 15px;
		margin-top: 20px;background-color: white;border: 1px solid gray;">
			<label style="padding-left: 5px">请详细填写您的个人信息，以便我们能及时与您联系!</label>
		</view>
		<view style="color: #538115;margin-top: 10px;margin-bottom: 10px;font-size: 20px">以下是您预约的专家基本资料:</view>
		<view class="square-box" style="color: #4b8400;width: 370px;font-size: 15px;
		background-color: white;border: 1px solid gray;">
			<view style="display: flex">
				<view style="margin-top: 20px; margin-left: 20px;">
					<image :src="DoctorData.avatar" alt="医生头像" style="border-radius: 50%; width: 100px; height: 100px;">
					</image>
					<view style="margin-top: 10px; font-size: 15px; text-align: center;">
						<view style="display: flex;">
							<view>
								<label style="color: orange; cursor: pointer;">{{ DoctorData.name }}</label>
							</view>
							<view style="margin-left: 10px;">
								<label style="color: orange; cursor: pointer;">{{ DoctorData.officeName }}</label>
							</view>
						</view>
						<view style="margin-top: 10px;">
							<label style="color: orange; cursor: pointer;">{{ DoctorData.hospitalName }}</label>
						</view>
					</view>
				</view>
				<view style="margin-left: 15px">
					<view style="font-size: 14px; color: #666666;margin-top: 10px;">
						<view class="line3">擅长治疗: {{ DoctorData.skill }}</view>
					</view>
					<view style="margin-top: 10px; font-size: 14px">
						<label style="color: gray;">出诊时间:
							<text style="color: red">{{ this.date }}</text> <text
								style="color: red">{{ this.time }}</text>
						</label>
						<label style="margin-left: 10px;color: orange;">
							出诊地点: {{ DoctorData.hospitalName }}
						</label>
					</view>
					<view style="margin-top: 10px;font-size: 14px">
						<view style="color:gray">门诊电话: <text style="color: orange">{{ DoctorData.officePhone }}</text>
						</view>
						<view style="color: gray;margin-top: 10px;display: flex;">
							<text></text>
							<text style="color: red">¥{{ DoctorData.price }}</text>
							<button @click="chat(DoctorData.id)" type="primary" size="mini"
								style="font-size: 14px;width: 100px;">医前咨询</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-forms :modelValue="form" ref="formRef" :rules="rules" label-width="90px" style="margin-top: 20px;">
			<uni-forms-item label="请输入患者疾病:" name="disease" required>
				<uni-easyinput style="font-weight: bold;" v-model="form.disease" placeholder="请输入有效疾病（小于12个字符）"
					:disabled="reservationId" />
			</uni-forms-item>
			<uni-forms-item label="请输入疾病具体描述:" name="diseaseDescription">
				<uni-easyinput style="font-weight: bold;" v-model="form.diseaseDescription" type="textarea"
					placeholder="请输入疾病描述(小于200个字符)" autoHeight :disabled="reservationId" />
			</uni-forms-item>
			<uni-forms-item label="请输入患者姓名:" name="patientName" required>
				<uni-easyinput style="font-weight: bold;" v-model="form.patientName" placeholder="中文(小于12个字符)"
					:disabled="reservationId" />
			</uni-forms-item>
			<uni-forms-item label="性别:" name="gender" required>
				<radio-group @change="radioChange" style="margin-top: 10px;" :disabled="reservationId">
					<label>
						<radio value="1" :checked="form.gender === '1'" :disabled="reservationId" />男
					</label>
					<label style="margin-left: 50px;">
						<radio value="2" :checked="form.gender === '2'" :disabled="reservationId" />女
					</label>
				</radio-group>
			</uni-forms-item>
			<uni-forms-item label="请输入患者身份证:" name="peopleCard" required>
				<uni-easyinput style="font-weight: bold;" v-model="form.peopleCard" placeholder="填写有效身份证"
					:disabled="reservationId" />
			</uni-forms-item>
			<uni-forms-item label="请输入患者手机号码:" name="phone" required>
				<uni-easyinput style="font-weight: bold;" v-model="form.phone" placeholder="填写有效手机号码"
					:disabled="reservationId" />
			</uni-forms-item>
			<view v-if="!reservationId" style="margin-top: 20px;display: flex;">
				<button type="primary" @click="submitForm(DoctorData.price)"
					style="height: 50px;font-size: 18px;">付费预约</button>
				<button type="warn" @click="resetForm"
					style="margin-left: 40px;height: 50px;font-size: 18px;">重置信息</button>
			</view>

		</uni-forms>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				user: uni.getStorageSync('xm-user'),
				date: '',
				time: '',
				doctorId: '',
				DoctorData: {},
				reservationId: null,
				form: {
					disease: '',
					diseaseDescription: '',
					patientName: '',
					gender: '',
					peopleCard: '',
					phone: ''
				},
				rules: {
					disease: {
						rules: [{
								required: true,
								errorMessage: '请输入疾病名称',
								trigger: 'blur'
							},
							{
								minLength: 1,
								maxLength: 12,
								errorMessage: '疾病名称长度应在1到12个字符之间',
								trigger: 'blur'
							}
						]
					},
					patientName: {
						rules: [{
								required: true,
								errorMessage: '请输入患者姓名',
								trigger: 'blur'
							},
							{
								pattern: /^[\u4e00-\u9fa5]{1,12}$/,
								errorMessage: '姓名应为中文且长度小于12个字符',
								trigger: 'blur'
							}
						]
					},
					gender: {
						rules: [{
							required: true,
							errorMessage: '请选择性别',
							trigger: 'change'
						}]
					},
					peopleCard: {
						rules: [{
								required: true,
								errorMessage: '请输入身份证号码',
								trigger: 'blur'
							},
							{
								pattern: /^\d{15}(\d{2}[A-Za-z0-9])?$/,
								errorMessage: '身份证号码格式不正确',
								trigger: 'blur'
							}
						]
					},
					phone: {
						rules: [{
								required: true,
								errorMessage: '请输入手机号码',
								trigger: 'blur'
							},
							{
								pattern: /^1[3-9]\d{9}$/,
								errorMessage: '手机号码格式不正确',
								trigger: 'blur'
							}
						]
					}
				},
			}
		},
		onLoad(option) {
			this.reservationId = option.reservationId;
			this.doctorId = option.doctorId; // 转换为整数
			this.date = option.date;
			this.time = option.time
		},
		onShow() {
			this.loadDoctor()
			if (this.reservationId !== null) {
				this.loadReservation()
			}

		},
		methods: {
			loadReservation() {
				this.$request.get(`/reservation/selectById/${this.reservationId}`).then(res => {
					if (res.code === '200') {
						// 正确的赋值方式
						this.form = {
							disease: res.data.disease,
							diseaseDescription: res.data.diseaseDescription,
							patientName: res.data.patientName,
							gender: 1,
							peopleCard: res.data.peopleCard,
							phone: res.data.phone,
						};
					} else {
						this.$message.error(res.msg);
					}
				});
			},
			chat(chatId) {
				// 发送第一个请求以获取 chatRoleId1 和 chatRoleId2
				this.$request.post('/chatRole/add', {
					chatUserId: chatId,
					userId: this.user.id
				}).then(res => {
					if (res.code === '200') {
						// 获取返回的 mapData
						const resultMap = res.data; // resultMap 应该包含 chatRoleId1 和 chatRoleId2
						// 从 resultMap 中提取 ID
						const chatRoleId1 = resultMap.chatRoleId1;
						const chatRoleId2 = resultMap.chatRoleId2;
						// 使用提取的 ID 发送第二个请求
						this.$request.post('/chatGroup/add', {
							chatUserId: chatRoleId1,
							userId: chatRoleId2
						}).then(res => {
							if (res.code === '200') {
								// 请求成功，跳转到聊天页面
								this.$router.push({
									path: '/pages/chatDetail/chatDetail',
									query: {
										chatId: chatId,
										role: 'DOCTOR'
									}
								});
							} else {
								// 显示错误信息
								this.$message.error(res.msg);
							}
						});
					} else {
						// 显示错误信息
						this.$message.error(res.msg);
					}
				});
			},
			loadDoctor() {
				this.$request.get(`/doctor/selectByDoctorId/${this.doctorId}`).then(res => {
					if (res.code === '200') {
						this.DoctorData = res.data;
						this.doctorName=res.data.name;
						this.$forceUpdate(); // 如果数据绑定没有自动更新，尝试强制更新
					}
				}).catch(error => {
					// 处理可能发生的错误
					this.$message.error('加载医生信息失败');
					console.error(error);
				});
			},
			submitForm(price) {
				this.$refs.formRef.validate().then(valid => {
					if (valid) {
						const requestData = {
							...this.form, // 展开 this.form 的属性
							doctorId: this.doctorId,
							doctorName:this.doctorName,
							appointmentTime: this.time,
							price: price
						};
						this.$request.post('/reservation/add', requestData).then(res => {
							if (res.code === '200') { // 表示成功保存
								// 使用uni-app的路由跳转方法
								uni.navigateTo({
									url: '/pages/successReservation/successReservation'
								});
							} else {
								// 使用uni-app的提示方法
								uni.showToast({
									title: res.msg,
									icon: 'none'
								});
							}
						}).catch(error => {
							// 处理请求异常
							uni.showToast({
								title: '请求异常，请稍后再试',
								icon: 'none'
							});
						});
					}
				});
			},
			resetForm() {
				this.form = {
					disease: '',
					diseaseDescription: '',
					patientName: '',
					gender: '',
					peopleCard: '',
					phone: ''
					// ... 其他表单项
				};
				uni.showToast({
					icon: 'success',
					title: '重置成功'
				})
			},
			radioChange(e) {
				this.form.gender = e.detail.value;
			}
		}
	}
</script>

<style>

</style>